<template>
  <div class="profile-page">
    <!-- 页面头部 -->
    <div class="page-header bg-white border-b border-gray-200">
      <div class="container mx-auto px-4 py-6">
        <h1 class="text-2xl font-bold text-gray-900">个人中心</h1>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="container mx-auto px-4 py-8">
      <div class="flex flex-col lg:flex-row gap-8">
        <!-- 侧边栏 -->
        <GlobalSidebar
          :menu-items="menuItems"
          class="w-full lg:w-64 flex-shrink-0"
        />

        <!-- 内容区域 -->
        <div class="flex-1 min-w-0">
          <!-- 个人信息卡片 -->
          <GlobalCard v-if="activeMenu === '/user/profile'" class="mb-8">
            <template #header>
              <div class="flex items-center justify-between">
                <h2 class="text-lg font-medium">个人信息</h2>
                <el-button type="primary" @click="handleEdit"
                  >编辑资料</el-button
                >
              </div>
            </template>

            <div class="user-info space-y-6">
              <!-- 头像区域 -->
              <div class="flex items-center">
                <el-avatar :size="80" :src="userInfo.avatar" />
                <div class="ml-4">
                  <h3 class="text-xl font-medium">{{ userInfo.nickname }}</h3>
                  <p class="text-gray-500">
                    {{ userInfo.bio || "这个人很懒，什么都没写~" }}
                  </p>
                </div>
              </div>

              <!-- 基本信息 -->
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="info-item">
                  <span class="label">用户名：</span>
                  <span class="value">{{ userInfo.username }}</span>
                </div>
                <div class="info-item">
                  <span class="label">手机号：</span>
                  <span class="value">{{ userInfo.phone }}</span>
                  <el-button
                    type="primary"
                    link
                    @click="showPhoneDialog = true"
                  >
                    修改
                  </el-button>
                </div>
                <div class="info-item">
                  <span class="label">邮箱：</span>
                  <span class="value">{{ userInfo.email }}</span>
                  <el-button
                    type="primary"
                    link
                    @click="showEmailDialog = true"
                  >
                    修改
                  </el-button>
                </div>
                <div class="info-item">
                  <span class="label">注册时间：</span>
                  <span class="value">{{
                    formatDate(userInfo.createTime)
                  }}</span>
                </div>
              </div>

              <!-- 账号安全 -->
              <div class="security-section">
                <h4 class="text-lg font-medium mb-4">账号安全</h4>
                <div class="space-y-4">
                  <div class="security-item">
                    <div class="flex items-center justify-between">
                      <span class="text-gray-700">登录密码</span>
                      <el-button
                        type="primary"
                        link
                        @click="showPasswordDialog = true"
                      >
                        修改密码
                      </el-button>
                    </div>
                  </div>
                  <div class="security-item">
                    <div class="flex items-center justify-between">
                      <span class="text-gray-700">账号注销</span>
                      <el-button
                        type="danger"
                        link
                        @click="showDeleteDialog = true"
                      >
                        注销账号
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </GlobalCard>

          <!-- 我的订单 -->
          <div v-if="activeMenu === '/user/orders'" class="orders-section">
            <el-tabs v-model="orderStatus" @tab-click="handleOrderStatusChange">
              <el-tab-pane label="全部订单" name="all" />
              <el-tab-pane label="待付款" name="unpaid" />
              <el-tab-pane label="待使用" name="unused" />
              <el-tab-pane label="已完成" name="completed" />
              <el-tab-pane label="已取消" name="cancelled" />
            </el-tabs>

            <!-- 订单列表 -->
            <div class="order-list space-y-4">
              <GlobalCard
                v-for="order in orderList"
                :key="order.id"
                class="order-card"
              >
                <div
                  class="order-header flex items-center justify-between mb-4"
                >
                  <div class="order-info">
                    <span class="order-id">订单号：{{ order.orderNo }}</span>
                    <span class="order-time ml-4">{{
                      formatDate(order.createTime)
                    }}</span>
                  </div>
                  <el-tag :type="getOrderStatusType(order.status)">
                    {{ getOrderStatusText(order.status) }}
                  </el-tag>
                </div>

                <div class="order-content">
                  <div
                    v-for="item in order.items"
                    :key="item.id"
                    class="order-item flex items-center py-4 border-t border-gray-100"
                  >
                    <el-image
                      :src="item.image"
                      :alt="item.name"
                      class="w-20 h-20 object-cover rounded"
                    />
                    <div class="ml-4 flex-1">
                      <h4 class="text-lg">{{ item.name }}</h4>
                      <p class="text-gray-500">{{ item.specs }}</p>
                      <div class="flex items-center justify-between mt-2">
                        <span class="text-primary-600">¥{{ item.price }}</span>
                        <span class="text-gray-500">x{{ item.quantity }}</span>
                      </div>
                    </div>
                  </div>
                </div>

                <div
                  class="order-footer flex items-center justify-between mt-4 pt-4 border-t border-gray-100"
                >
                  <div class="order-total">
                    <span class="text-gray-500">总计：</span>
                    <span class="text-xl text-primary-600 font-medium">
                      ¥{{ order.totalAmount }}
                    </span>
                  </div>
                  <div class="order-actions space-x-2">
                    <el-button
                      v-if="order.status === 'unpaid'"
                      type="primary"
                      @click="handlePay(order)"
                    >
                      立即支付
                    </el-button>
                    <el-button
                      v-if="order.status === 'unused'"
                      type="primary"
                      @click="handleUseOrder(order)"
                    >
                      使用
                    </el-button>
                    <el-button
                      v-if="order.status === 'completed'"
                      type="primary"
                      @click="handleComment(order)"
                    >
                      评价
                    </el-button>
                    <el-button
                      v-if="['unpaid', 'unused'].includes(order.status)"
                      @click="handleCancel(order)"
                    >
                      取消订单
                    </el-button>
                    <el-button
                      v-if="order.status === 'completed'"
                      @click="handleOrderDetail(order)"
                    >
                      查看详情
                    </el-button>
                  </div>
                </div>
              </GlobalCard>
            </div>

            <!-- 分页 -->
            <div class="pagination flex justify-center mt-8">
              <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :total="total"
                :page-sizes="[10, 20, 30, 40]"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 修改手机号码弹窗 -->
    <PhoneDialog
      v-model="showPhoneDialog"
      :current-phone="userInfo.phone"
      @success="handlePhoneChange"
    />

    <!-- 修改邮箱弹窗 -->
    <EmailDialog
      v-model="showEmailDialog"
      :current-email="userInfo.email"
      @success="handleEmailChange"
    />

    <!-- 修改密码弹窗 -->
    <PasswordDialog
      v-model="showPasswordDialog"
      @success="handlePasswordChange"
    />

    <!-- 注销账号弹窗 -->
    <DeleteAccountDialog
      v-model="showDeleteDialog"
      @success="handleAccountDelete"
    />
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import GlobalSidebar from "@/components/global/GlobalSidebar.vue";
import GlobalCard from "@/components/global/GlobalCard.vue";
import PhoneDialog from "@/components/user/PhoneDialog.vue";
import EmailDialog from "@/components/user/EmailDialog.vue";
import PasswordDialog from "@/components/user/PasswordDialog.vue";
import DeleteAccountDialog from "@/components/user/DeleteAccountDialog.vue";

const router = useRouter();
const route = useRoute();

// 侧边栏菜单
const menuItems = [
  {
    title: "个人信息",
    path: "/user/profile",
    icon: "User",
  },
  {
    title: "我的订单",
    path: "/user/orders",
    icon: "Tickets",
  },
  {
    title: "我的收藏",
    path: "/user/favorites",
    icon: "Star",
  },
  {
    title: "我的评价",
    path: "/user/reviews",
    icon: "ChatDotRound",
  },
  {
    title: "消息中心",
    path: "/user/messages",
    icon: "Bell",
  },
];

// 当前激活的菜单
const activeMenu = computed(() => route.path);

// 用户信息
const userInfo = ref({
  username: "demo_user",
  nickname: "演示用户",
  avatar: "/images/avatars/default.jpg",
  bio: "热爱旅行的探索者",
  phone: "138****8888",
  email: "demo@example.com",
  createTime: "2024-01-01 12:00:00",
});

// 对话框状态
const showPhoneDialog = ref(false);
const showEmailDialog = ref(false);
const showPasswordDialog = ref(false);
const showDeleteDialog = ref(false);

// 订单相关
const orderStatus = ref("all");
const orderList = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 格式化日期
const formatDate = (date) => {
  return new Date(date).toLocaleString();
};

// 获取订单状态类型
const getOrderStatusType = (status) => {
  const typeMap = {
    unpaid: "warning",
    unused: "primary",
    completed: "success",
    cancelled: "info",
  };
  return typeMap[status] || "info";
};

// 获取订单状态文本
const getOrderStatusText = (status) => {
  const textMap = {
    unpaid: "待付款",
    unused: "待使用",
    completed: "已完成",
    cancelled: "已取消",
  };
  return textMap[status] || "未知状态";
};

// 处理编辑资料
const handleEdit = () => {
  // TODO: 实现编辑资料逻辑
};

// 处理手机号变更
const handlePhoneChange = (newPhone) => {
  userInfo.value.phone = newPhone;
  ElMessage.success("手机号修改成功");
};

// 处理邮箱变更
const handleEmailChange = (newEmail) => {
  userInfo.value.email = newEmail;
  ElMessage.success("邮箱修改成功");
};

// 处理密码变更
const handlePasswordChange = () => {
  ElMessage.success("密码修改成功");
};

// 处理账号注销
const handleAccountDelete = () => {
  ElMessage.success("账号已注销");
  router.push("/login");
};

// 处理订单状态变更
const handleOrderStatusChange = (tab) => {
  // TODO: 根据状态获取订单列表
};

// 处理支付
const handlePay = (order) => {
  // TODO: 实现支付逻辑
};

// 处理使用订单
const handleUseOrder = (order) => {
  // TODO: 实现使用订单逻辑
};

// 处理评价
const handleComment = (order) => {
  // TODO: 实现评价逻辑
};

// 处理取消订单
const handleCancel = async (order) => {
  try {
    await ElMessageBox.confirm("确定要取消该订单吗？", "提示", {
      type: "warning",
    });
    // TODO: 实现取消订单逻辑
    ElMessage.success("订单已取消");
  } catch (error) {
    if (error === "cancel") return;
    ElMessage.error("取消订单失败");
  }
};

// 查看订单详情
const handleOrderDetail = (order) => {
  router.push(`/order/${order.id}`);
};

// 处理分页大小变更
const handleSizeChange = (size) => {
  pageSize.value = size;
  // TODO: 重新获取订单列表
};

// 处理页码变更
const handleCurrentChange = (page) => {
  currentPage.value = page;
  // TODO: 重新获取订单列表
};
</script>

<style lang="scss" scoped>
.profile-page {
  @apply min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-300;

  .page-header {
    @apply bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700;

    h1 {
      @apply text-gray-900 dark:text-white;
    }
  }

  .user-info {
    .info-item {
      @apply flex items-center;

      .label {
        @apply text-gray-500 dark:text-gray-400 w-24;
      }

      .value {
        @apply text-gray-900 dark:text-gray-100 flex-1;
      }
    }
  }

  .security-section {
    .security-item {
      @apply p-4 bg-gray-50 dark:bg-gray-800 rounded-lg transition-all duration-300 hover:shadow-md;

      &:hover {
        @apply bg-gray-100 dark:bg-gray-700;
      }
    }
  }

  .el-avatar {
    @apply ring-4 ring-primary-100 dark:ring-primary-900 ring-offset-2 ring-offset-white dark:ring-offset-gray-900 transition-all duration-300;

    &:hover {
      @apply ring-primary-500 dark:ring-primary-400 transform scale-105;
      box-shadow: 0 0 20px rgba(var(--el-color-primary-rgb), 0.3);
    }
  }

  .order-card {
    @apply transition-all duration-300 hover:shadow-lg;

    .order-header {
      .order-id {
        @apply text-gray-600 dark:text-gray-400;
      }

      .order-time {
        @apply text-gray-500 dark:text-gray-500;
      }
    }

    .order-item {
      @apply transition-all duration-300;

      &:hover {
        @apply bg-gray-50 dark:bg-gray-800;
      }

      .el-image {
        @apply transition-transform duration-300;
      }

      &:hover .el-image {
        @apply transform scale-105;
      }
    }

    .order-total {
      .text-primary-600 {
        @apply font-bold;
      }
    }

    .order-actions {
      .el-button {
        @apply transition-all duration-300;

        &:hover {
          @apply transform scale-105;
        }
      }
    }
  }

  :deep(.el-form-item__label) {
    @apply text-gray-700 dark:text-gray-300;
  }

  :deep(.el-input__inner) {
    @apply text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-800;
  }

  :deep(.el-avatar) {
    @apply border-4 border-white dark:border-gray-800;
  }

  :deep(.el-card) {
    @apply bg-white dark:bg-gray-900;

    .el-card__header {
      @apply border-gray-100 dark:border-gray-800;
    }
  }

  :deep(.el-table) {
    @apply bg-white dark:bg-gray-900;

    th {
      @apply bg-gray-50 dark:bg-gray-800 text-gray-500 dark:text-gray-400;
    }

    td {
      @apply text-gray-900 dark:text-gray-100;
    }
  }

  :deep(.el-pagination) {
    @apply text-gray-900 dark:text-gray-100;

    .el-pagination__total {
      @apply text-gray-500 dark:text-gray-400;
    }
  }
}

// 弹窗样式优化
:deep(.el-dialog) {
  @apply rounded-lg overflow-hidden;

  .el-dialog__header {
    @apply bg-gray-50 dark:bg-gray-800 px-6 py-4;

    .el-dialog__title {
      @apply text-lg font-medium text-gray-900 dark:text-white;
    }
  }

  .el-dialog__body {
    @apply p-6;
  }

  .el-dialog__footer {
    @apply bg-gray-50 dark:bg-gray-800 px-6 py-4;
  }
}

// 表单样式优化
:deep(.el-form-item) {
  .el-form-item__label {
    @apply text-gray-700 dark:text-gray-300;
  }

  .el-input__wrapper {
    @apply transition-all duration-300;

    &:hover {
      @apply ring-2 ring-primary-500/50;
    }

    &.is-focus {
      @apply ring-2 ring-primary-500;
    }
  }
}

// 动画类
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}
</style>
